<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>club详情展示</title>
    <c:import url="commonsh.jsp"></c:import>
    <c:import url="coachcommon.jsp"></c:import>
    <link rel="stylesheet" href="css/swiper-3.2.7.min.css" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="css/bannerList.css">
<link rel="stylesheet" href="css/zerostyle.css">
<link rel="stylesheet" href="css/zerogrid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsiveslides.css">
<link href="statics/cocha/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<script src="statics/cocha/js/jquery-latest.min.js"></script>
<script src="statics/cocha/js/script.js"></script>
<script src="statics/cocha/js/jquery183.min.js"></script>
<script src="statics/cocha/js/responsiveslides.min.js"></script>
</head>
<body>

<div class="banner">
    <ul class="">
        <li><a href=""><img src="statics/imagesclub/banner/banner1.jpg" alt=""></a></li>
        <li><a href=""><img src="statics/imagesclub/banner/banner1.jpg" alt=""></a></li>
        <li><a href=""><img src="statics/imagesclub/banner/banner1.jpg" alt=""></a></li>
    </ul>
    <div class="left-btn"></div>
    <div class="right-btn"></div>
    <div class="img-btn-list"></div>
</div>

<!--course start-->
<div class="course" style="background-color: rgba(22,14,0,0.65)">
    <div class="course-head"  >
        <h2 style="color: white">预约课程</h2>
        <p style="color: white">Just do it！ For Your Die</p>
    </div>
    <div class="w1200">
        <div class="content-four">
            <ul class="contentbox-four">
                <c:forEach var="inv" items="${list}">
                    <li class="con-four">
                        <img src="statics/imagesclub/photo/${inv.cImg}.jpg"/>
                        <div class="txt-four">
<%--                            <form action="courseorderinsert.action" method="post" >--%>
                                <h3>课程：${inv.cName}</h3>
                                <p>教练：${inv.coName}</p>
                                <p>教练教龄：${inv.teachingAge}</p>
                                <p>开课时间：${inv.cDate}</p>
                                <p>课时时间：${inv.coTime}</p>
                                <p>上课人数：${inv.cNumber}</p>
                                <p>课程费用：${inv.cMoney}</p>
                                <input type="hidden" value="${inv.clId}" name="clId">
                                <input type="hidden" value="${inv.coId}" name="coId">
                                <input type="hidden" value="${inv.cId}" name="cId">
<%--                                <input type="submit" value="预约课程"/>--%>
                                <a href="courseorderinsert.action?clId=${inv.clId}&&coId=${inv.coId}&&cId=${inv.cId}">预约课程</a>
<%--                            </form>--%>
                        </div>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
</div>
<!--course end-->

<!--team start-->
<div id="team" style="background-color: rgba(22,14,0,0.65)">
    <div class="team_head">
        <h2 style="color: black">行业顶级导师团队</h2>
        <p style="color: black">全面的课程开设 为您的人生梦想添翼</p>
        <h2>行业顶级教练</h2>
        <p>火力全开，全力以赴</p>
    </div>
    <div class="w1200">
        <div class="btnMode" id="slider">
            <a href="javascript:void(0);" class="prev btn"></a>
            <div class="scroll">
                <ul class="scrollContainer">
                    <c:forEach var="coach" items="${list}">
                        <li class="panel" id="panel_1">
                            <a class="inside" target="_blank">
                                <img width="230" height="295" alt="Alexander McQueen秋季"
                                     src="statics/imagesclub/photo/${coach.coachImg}.jpg"/>
                                <span>${coach.coName}</span>
                                <p>${coach.title1}</p>
                                <p>${coach.title2}</p>
                                <p>${coach.title3}</p>
                            </a>
                            <a href="coachtoshow.action?coId=${coach.coId}" class="panel_more">查看更多</a>
                        </li>
                    </c:forEach>
                </ul>
            </div>
            <a href="javascript:void(0);" class="next btn"></a>
        </div>
    </div>
</div>
<!--team end-->

<!--cert start-->
<div class="cert" style="background-color:#FFFFFF">
    <div class="cert-head">
        <h2>四大类、7种权威证书一次获得</h2>
        <p>在您的职业生涯开始，R-STAR助您获得国家职业资格认证</p>
    </div>
    <div class="w1200">
        <div class="container cert_list">
            <div class="swiper-container swiper1">
                <div class="swiper-wrapper" style="width: 1200px;height: 50px;">
                    <div class="swiper-slide selected">证书</div>
                    <div class="swiper-slide">国职证书</div>
                    <div class="swiper-slide">国专证书</div>
                    <div class="swiper-slide">康复训练证书</div>
                    <div class="swiper-slide">普拉提证书</div>
                    <div class="swiper-slide">功能性证书</div>
                    <div class="swiper-slide">高级私教证书</div>
                    <div class="swiper-slide">训练营证书</div>
                </div>
            </div>
            <!-- swiper2 -->
            <div class="swiper-container swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_06.jpg" alt="">
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_09.jpg" alt="">
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_06.jpg" alt="">
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_06.jpg" alt="">
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_06.jpg" alt="">
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_06.jpg" alt="">
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_06.jpg" alt="">
                    </div>
                    <div class="swiper-slide swiper-no-swiping">
                        <img src="statics/imagesclub/bg/bg_06.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer>
        <div class="wrap-footer" style="background-color: black">
            <div class="zerogrid">
                <div class="row">
                    <h3 style="color: #FFFFFF">关于我们</h3>
                    <span style="color: #FFFFFF">联系方式 / 83145678 </span></br>
                    <span style="color: #FFFFFF">Email / info@domain.com  </span></br>
                    <span style="color: #FFFFFF">Studio / Moonshine St. 14/05 Xi'an City </span></br>
                    <span><b style="color: #FFFFFF;font-weight: bolder">Copyright &copy; 2020.Company name All rights reserved.</b></span>
                </div>
            </div>
        </div>
    </footer>
</div>
<!--cert end-->


<!--head js-->
<script type="text/javascript" src="statics/js1_sh/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.nav li').hover(function () {
            $('span', this).stop().css('height', '2px');
            $('span', this).animate({
                left: '0',
                width: '100%',
                right: '0'
            }, 200);
        }, function () {
            $('span', this).stop().animate({
                left: '50%',
                width: '0'
            }, 200);
        });
    });
</script>
<!--banner-->
<script src="statics/js1_sh/bannerList.js"></script>
<script>
    bannerListFn(
        $(".banner"),
        $(".img-btn-list"),
        $(".left-btn"),
        $(".right-btn"),
        2000,
        true
    );
</script>

<!--team-->
<script type="text/javascript">
    $(function () {

        /*未元素的首尾添加补白*/
        var $panels = $('#slider .scrollContainer > li');
        var $parent = $panels.parent();//或许当前li的最近一级的父元素
        var $length = $panels.length;//获取指定length值
        var $first = $panels.eq(0).clone().addClass("panel cloned").attr("id", 'panel_' + ($length + 1));//获取第一个元素并复制
        var $last = $panels.eq($length - 1).clone().addClass("cloned").attr("id", 'panel_0');
        ;//获取最后一个元素并复制
        $parent.append($first);//将li序列中的第一个添加到ul元素中的最后一个  $("#slide02").scrollLeft(0);
        $parent.prepend($last);//将li序列中的最后一个添加到ul元素中的第一个
        var totalPanels = $(".scrollContainer").children().size();//所有子元素的数字，滚动元素的个数 7
        var regWidth = $(".panel").css("width");//获取li元素的宽度
        var regImgWidth = $(".panel img").css("width");//获取其中图片的宽度
        var movingDistance = 205;//每次移动的距离
        var curWidth = 220;//当前中间li的宽度为350px
        var curHeight = 442;//当前中间li的高度未312
        var curImgWidth = 220;
        var curImgHeight = 220;
        var othersW = 200;//其他li的宽度
        var othersH = 380;//高度
        var othersImgW = 200;//其他li的宽度
        var othersImgH = 200;//高度
        var $panels = $('#slider .scrollContainer > li');//此处作用是将复制进来补白的元素重新赋值
        var $container = $('#slider .scrollContainer');
        $panels.css({'float': 'left', 'position': 'relative'});
        $("#slider").data("currentlyMoving", false);//是否正在运动中
        $container.css('width', (($panels[0].offsetWidth + 25) * $panels.length) + 60).css('left', '0');//计算容器的总的宽度 PS：25为margin值 offsetWidth
        var scroll = $('#slider .scroll').css('overflow', 'hidden');

        function returnToNormal(element) {//li元素返回到正常状态
            $(element).animate({width: othersW, height: othersH}).find("img").animate({
                width: othersImgW,
                height: othersImgH
            });
        };

        function growBigger(element) {//当前元素之间变大
            $(element).addClass("current").animate({
                width: curWidth,
                height: curHeight
            }).siblings().removeClass("current")
                .end().find("img").animate({width: curImgWidth, height: curImgHeight})
        }

        //direction true = right, false = left
        function change(direction) {
            //if not at the first or last panel
            if ((direction && !(curPanel < totalPanels - 2)) || (!direction && (curPanel <= 1))) {
                return false;
            }
            //if not currently moving
            if (($("#slider").data("currentlyMoving") == false)) {
                $("#slider").data("currentlyMoving", true);
                var next = direction ? curPanel + 1 : curPanel - 1;
                var leftValue = $(".scrollContainer").css("left");
                var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
                $(".scrollContainer").stop().animate({"left": movement}, function () {
                    $("#slider").data("currentlyMoving", false);
                });
                returnToNormal("#panel_" + curPanel);
                growBigger("#panel_" + next);
                curPanel = next;
                //remove all previous bound functions
                $("#panel_" + (curPanel + 1)).unbind();
                //go forward
                $("#panel_" + (curPanel + 1)).click(function () {
                    change(true);
                });
                //remove all previous bound functions
                $("#panel_" + (curPanel - 1)).unbind();
                //go back
                $("#panel_" + (curPanel - 1)).click(function () {
                    change(false);
                });
                //remove all previous bound functions
                $("#panel_" + curPanel).unbind();
            }
        }

        // Set up "Current" panel and next and prev 设置当前元素和上下
        growBigger("#panel_2");
        var curPanel = 2;
        $("#panel_" + (curPanel + 1)).click(function () {
            change(true);
            return false;
        });
        $("#panel_" + (curPanel - 1)).click(function () {
            change(false);
            return false;
        });
        //when the prev/next arrows are clicked
        $("#slider .next").click(function () {
            change(true);
        });
        $("#slider .prev").click(function () {
            change(false);
        });
        $(window).keydown(function (event) {//键盘方向键控制
            switch (event.keyCode) {
                case 13: //enter
                    $(".next").click();
                    break;
                case 37: //prev arrow
                    $(".prev").click();
                    break;
                case 39: //next arrow
                    $(".next").click();
                    break;
            }
        });

    });
</script>
<!--cert-->
<script type="text/javascript" src="statics/js1_sh/swiper-3.4.0.jquery.min.js"></script>
<script>
    $(function () {
        function setCurrentSlide(ele, index) {
            $(".swiper1 .swiper-slide").removeClass("selected");
            ele.addClass("selected");
        }

        var swiper1 = new Swiper('.swiper1', {
            slidesPerView: 8,
            paginationClickable: true,
            spaceBetween: 10,
            freeMode: true,
            loop: false,
            onTab: function (swiper) {
                var n = swiper1.clickedIndex;
            }
        });
        swiper1.slides.each(function (index, val) {
            var ele = $(this);
            ele.on("click", function () {
                setCurrentSlide(ele, index);
                swiper2.slideTo(index, 500, false);
            });
        });
        var swiper2 = new Swiper('.swiper2', {
            direction: 'horizontal',
            loop: false,
            //			effect : 'fade',//淡入
            //effect : 'cube',//方块
            //effect : 'coverflow',//3D流
            effect: 'flip',//3D翻转
            autoHeight: true,
            onSlideChangeEnd: function (swiper) {
                var n = swiper.activeIndex;
                setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                swiper1.slideTo(n, 500, false);
            }
        });
    });
</script>
<script>
    $(function () {
        $(".con-four").hover(function () {
            $(this).find(".txt-four").stop().animate({"left": 0});
        }, function () {
            $(this).find(".txt-four").stop().animate({"left": -380});
        })
    });
</script>
</body>
</html>
